<template>
  <div id="hinput" :class="'h-input-'+lineStyleFocus">
    <label :class="showClass" v-show="status">{{labelText}}</label>
    <el-input
      @focus="input_focus"
      @blur="input_blur"
      :placeholder="placeholderText"
      :value="value"
      @input="changVal($event)"
      clearable
      size="mini"
    ></el-input>
    <div class="liuh-input-bottom-line-parent">
      <div class="liuh-input-bottom-line-child" :class="lineStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hInput",
  props: {
    labelText: {
      type: String,
      default: "未知"
    },
    lineStyleFocus: {
      type: String,
      default: "default"
    },
    value: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {
      lineStyle: "",
      status: false,
      showClass: "",
      placeholderText: "",
      inputVal: ''
    };
  },
  created: function() {
    console.log("this.value:",this.value)
    if (this.value) {
      this.status = true;
      this.placeholderText = "";
      this.showClass = "liuh-label";
    } else {
      this.placeholderText = this.labelText;
    }
  },
  methods: {
    changVal(value) {
      console.log("emit")
      this.$emit('input', value)
      // this.inputVal = ""
    },
    input_focus() {
      if (this.value === "" || typeof this.value === 'undefined') {
        this.status = true;
        this.placeholderText = "";
        this.showClass = "liuh-label liuh-label-show";
      }
      this.lineStyle = "liuh-line-show";
    },
    input_blur() {
      if (this.value == "" || typeof this.value === 'undefined') {
        setTimeout(() => {
          this.status = false;
          this.placeholderText = this.labelText;
        }, 580);
        this.showClass = "liuh-label liuh-label-hide";
      }
      this.lineStyle = "liuh-line-hide";
    }
  }
};
</script>

<style lang="less">
#hinput {
  position: relative;
  margin: 20px;
  font-family: SimHei;
  .liuh-input-bottom-line-child {
    width: 100%;
    height: 2px;
    float: left;
    position: absolute;
  }
  .liuh-input-bottom-line-parent {
    width: 100%;
    height: 1px;
    background-color: rgb(223, 211, 211);
    width: 100%;
    float: left;
    position: relative;
  }
}
.h-input-default {
  .liuh-label {
    position: absolute;
    top: -9px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: 12px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-primary {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #409eff;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-success {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #67c23a;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-succ 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-succ 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #67c23a;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #67c23a;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-danger {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #f56c6c;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-danger 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-danger 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #f56c6c;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #f56c6c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-input-warning {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #e6a23c;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-warn 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-warn 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #e6a23c;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #e6a23c;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
@keyframes show-pass {
  0% {
    transform: translate3d(30px, 13px, 0);
  }
  100% {
    transform: translate3d(6px, 4px, 0);
  }
}
@keyframes hide-pass {
  0% {
    transform: translate3d(6px, 4px, 0);
  }
  100% {
    transform: translate3d(30px, 13px, 0);
  }
}
@keyframes line-show-succ {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: rgb(23, 192, 93);
  }
}
@keyframes line-hide-succ {
  0% {
    left: 0;
    width: 100%;
    background-color: rgb(23, 192, 93);
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-warn {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #e6a23c;
  }
}
@keyframes line-hide-warn {
  0% {
    left: 0;
    width: 100%;
    background-color: #e6a23c;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-danger {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #f56c6c;
  }
}
@keyframes line-hide-danger {
  0% {
    left: 0;
    width: 100%;
    background-color: #f56c6c;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
@keyframes line-show-primary {
  0% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
  100% {
    left: 0;
    width: 100%;
    background-color: #409eff;
  }
}
@keyframes line-hide-primary {
  0% {
    left: 0;
    width: 100%;
    background-color: #409eff;
  }
  100% {
    left: 50%;
    width: 0;
    background-color: transparent;
  }
}
</style>